import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import GLB from '@/assets/glb/test.glb';
export const init = (containerReference: string) => {
  const container = document.querySelector(containerReference) as HTMLDivElement;
  const camera = new THREE.PerspectiveCamera(
    75,
    container.clientWidth / container.clientHeight,
    0.001,
    1000
  );
  camera.position.z = 10;
  const scene = new THREE.Scene(); //创建场景
  const renderer = new THREE.WebGLRenderer({
    antialias: true,
    alpha: true
  });

  const controls = new OrbitControls(camera, renderer.domElement);
  controls.enableDamping = true;
  camera.position.set(0, 0, 10);
  controls.update();
  renderer.setSize(container.clientWidth, container.clientHeight);
  container.appendChild(renderer.domElement);

  // const glbPath = '../../../assets/glb/test.glb';
  const gltfLoader = new GLTFLoader();
  gltfLoader.load(GLB, gltf => scene.add(gltf.scene));

  const render = (time: number) => {
    requestAnimationFrame(render);
    renderer.render(scene, camera);
  };
  renderer.setAnimationLoop(render);
};
